<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孔氏小店kong.com--理想生活上孔氏小店</title>
    <link rel="shortcut icon" href="../imgs/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/ajax.js"></script>
</head>

<body>
    <div class="header">
        <div class="top">
            <span style="color: red;">嘿，欢迎来孔氏小店</span>
            <a href="http://10.101.96.3:8000/html/shopCart.html" id="shop" target="_blank"><span>购物车</span></a>
            <a href="http://10.101.96.3:8000/html/login.html" id="login"><span>请登录</span></a>
            <a href="http://10.101.96.3:8000/html/register.html"><span>免费注册</span></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="span" style="color: #333;"></span>
            <a href="http://10.101.96.3:8000/html/login.html" id="logout"><span id="span1">登出</span></a>
        </div>
    </div>
    <div id="box">
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126001" target="_blank" class="list">
            <div class="item1">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_1.jpg" alt="">
                <div class="footer-item-title">Jeep吉普男鞋2020春夏透气帆布鞋高低帮潮流百搭马丁靴男鞋女鞋潮</div>
                <div class="footer-price">￥238.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126002" target="_blank" class="list">
            <div class="item2">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_2.jpg" alt="">
                <div class="footer-item-title">tanmesso胸包男韩版斜挎包休闲牛津布小包背包单肩包男包胸前包潮</div>
                <div class="footer-price">￥58.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126003" target="_blank" class="list">
            <div class="item3">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_3.jpg" alt="">
                <div class="footer-item-title">回力男鞋秋季2020新款高帮登山鞋徒步运动鞋男防水防滑户外休闲鞋</div>
                <div class="footer-price">￥118.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126004" target="_blank" class="list">
            <div class="item4">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_4.png" alt="">
                <div class="footer-item-title">三只松鼠芒果干60g蜜饯果脯水果干网红休闲办公室零食小吃食品</div>
                <div class="footer-price">￥11.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126005" target="_blank" class="list">
            <div class="item5">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_5.jpg" alt="">
                <div class="footer-item-title">小才天4G全网通儿童电话手表防水学生智能可视频通话wifi防摔多功能定位可插卡拍照女孩适用小米华为360手机</div>
                <div class="footer-price">￥118.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126006" target="_blank" class="list">
            <div class="item6">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_6.png" alt="">
                <div class="footer-item-title">奥克斯取暖器电暖风机家用电暖气小太阳热风机办公室节能省电小型</div>
                <div class="footer-price">￥59.9</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126007" target="_blank" class="list">
            <div class="item7">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_7.jpg" alt="">
                <div class="footer-item-title">Crocs卡骆驰男鞋女童鞋2020秋季运动鞋拖鞋沙滩鞋凉鞋防滑洞洞鞋</div>
                <div class="footer-price">￥209.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126008" target="_blank" class="list">
            <div class="item8">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_8.jpg" alt="">
                <div class="footer-item-title">英国Limit空军飞行员手表男士夜光商务运动潮流粗犷正品名牌学生</div>
                <div class="footer-price">￥498.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126009" target="_blank" class="list">
            <div class="item9">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_9.jpg" alt="">
                <div class="footer-item-title">纽曼头戴式无线耳麦可调频无线话筒麦旅游景点导游讲解用扩音器无线麦教学K歌直播定频无线耳机老师上课麦克</div>
                <div class="footer-price">￥149.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126010" target="_blank" class="list">
            <div class="item10">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_10.jpg" alt="">
                <div class="footer-item-title">电压力锅家用双胆迷你小型4L5L6L8L升智能高压电饭煲电高压锅</div>
                <div class="footer-price">￥119.9</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126011" target="_blank" class="list">
            <div class="item11">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_11.jpg" alt="">
                <div class="footer-item-title">折叠躺椅午休午睡床阳台休闲沙滩靠背椅懒人沙发便携靠睡椅子家用</div>
                <div class="footer-price">￥69.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126012" target="_blank" class="list">
            <div class="item12">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_12.png" alt="">
                <div class="footer-item-title">【双11现货】兰蔻大粉水新清滢柔肤水400ml 深层补水保湿舒缓肌肤</div>
                <div class="footer-price">￥435.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126013" target="_blank" class="list">
            <div class="item13">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_13.png" alt="">
                <div class="footer-item-title">【双11抢先加购】美宝莲fitme乳液粉底液干皮救星遮瑕保湿持久</div>
                <div class="footer-price">￥139.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126014" target="_blank" class="list">
            <div class="item14">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_14.png" alt="">
                <div class="footer-item-title">奥克斯足浴盆电动按摩加热洗脚盆家用全自动恒温泡脚桶神器高深桶</div>
                <div class="footer-price">￥138.0</div>
            </div>
        </a>
        <a href="http://10.101.96.3:8000/html/product_details.html?id=1126015" target="_blank" class="list">
            <div class="item15">
                <img src="../imgs/time.gif" data-src="../imgs/shangping_15.png" alt="">
                <div class="footer-item-title">维达抽纸超韧3层M码120抽24包卫生餐巾纸巾抽纸家用实惠整箱装</div>
                <div class="footer-price">￥89.9</div>
            </div>
        </a>
    </div>
    <script>
        window.onload = function () {
            let span = document.getElementById("span")
            let shop = document.getElementById('shop')
            let span1 = document.getElementById('span1')
            let login = document.getElementById('login')
            let dataMsg = JSON.parse(localStorage.getItem("dataMsg"))
            let sessionid = getCookie("sessionid")
            if (sessionid != null) {
                span.innerHTML = "你好，" + dataMsg.msg.userInfo.name
                span1.innerHTML = "登出"
                login.innerHTML = ''
            } else {
                span1.innerHTML = ""
            }

            //登录了才能查看购物车
            shop.onclick = function () {
                if (sessionid == null) {
                    window.location.href = "http://10.101.96.3:8000/html/login.html"
                }
            }
            //登出
            let logout = document.getElementById('logout')
            let username = getCookie("username")

            logout.onclick = function () {
                if (username != null) {
                    Ajax.post('http://10.101.96.3:8000/logout', JSON.stringify(username), (data) => {
                        console.log(data)

                    })
                }
            }

            function getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            }


            let num = document.getElementsByTagName('img').length
            let img = document.getElementsByTagName('img')
            let n = 0
            lazyLoad()
            window.onscroll = lazyLoad;

            function lazyLoad() {
                let seeHeight = document.documentElement.clientHeight;
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                for (let i = n; i < num; i++) {
                    if (img[i].offsetTop < seeHeight + scrollTop) {
                        if (img[i].getAttribute('src') == '../imgs/time.gif') {
                            img[i].src = img[i].getAttribute('data-src');
                        }
                        n = n + 1;
                    }
                }
            }
        }
    </script>
</body>

</html>